'use client';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
import { GraduationCap, Book, UserCheck, Award, MessageSquare } from 'lucide-react';

export function StudyContent() {
  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <GraduationCap className="h-5 w-5" />
            学习成绩
          </CardTitle>
          <CardDescription>张小明 - 三年级二班</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="flex justify-between items-center">
              <span>期中考试总分</span>
              <span className="text-2xl font-bold">95分</span>
            </div>
            <div className="flex justify-between items-center">
              <span>班级排名</span>
              <span className="text-2xl font-bold">5/45</span>
            </div>
            <div className="border-t pt-2">
              <div className="text-sm text-muted-foreground mb-2">各科成绩</div>
              <div className="grid grid-cols-2 gap-2 text-sm">
                <div>语文：92分</div>
                <div>数学：96分</div>
                <div>英语：94分</div>
                <div>科学：98分</div>
              </div>
            </div>
            <Button asChild className="w-full">
              <Link href="/parent/children/scores">查看成绩详情</Link>
            </Button>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Book className="h-5 w-5" />
            作业完成
          </CardTitle>
          <CardDescription>本周作业情况</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="flex justify-between items-center">
              <span>完成率</span>
              <span className="text-2xl font-bold">98%</span>
            </div>
            <div className="space-y-2">
              <div className="bg-muted p-3 rounded-lg">
                <div className="flex justify-between mb-1">
                  <span className="font-medium">数学练习册</span>
                  <span className="text-green-600">已完成</span>
                </div>
                <p className="text-sm text-muted-foreground">截止时间：今天 20:00</p>
              </div>
              <div className="bg-muted p-3 rounded-lg">
                <div className="flex justify-between mb-1">
                  <span className="font-medium">英语单词默写</span>
                  <span className="text-yellow-600">待完成</span>
                </div>
                <p className="text-sm text-muted-foreground">截止时间：明天 18:00</p>
              </div>
            </div>
            <Button asChild className="w-full">
              <Link href="/parent/children/homework">查看全部作业</Link>
            </Button>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <UserCheck className="h-5 w-5" />
            考勤记录
          </CardTitle>
          <CardDescription>本月考勤统计</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="flex justify-between items-center">
              <span>出勤率</span>
              <span className="text-2xl font-bold">98%</span>
            </div>
            <div className="space-y-2">
              <div className="flex justify-between text-sm">
                <span>正常出勤</span>
                <span>20天</span>
              </div>
              <div className="flex justify-between text-sm">
                <span>请假</span>
                <span>1天</span>
              </div>
              <div className="flex justify-between text-sm">
                <span>迟到</span>
                <span>0次</span>
              </div>
            </div>
            <Button asChild variant="outline" className="w-full">
              <Link href="/parent/children/attendance">查看考勤详情</Link>
            </Button>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Award className="h-5 w-5" />
            奖惩记录
          </CardTitle>
          <CardDescription>最近的奖惩情况</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="bg-muted p-3 rounded-lg">
              <div className="flex items-start gap-3">
                <div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
                  <Award className="h-4 w-4 text-green-600" />
                </div>
                <div>
                  <p className="font-medium">三好学生</p>
                  <p className="text-sm text-muted-foreground">表现优异，品学兼优</p>
                  <p className="text-xs text-muted-foreground mt-1">2024-03-01</p>
                </div>
              </div>
            </div>
            <div className="bg-muted p-3 rounded-lg">
              <div className="flex items-start gap-3">
                <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                  <Award className="h-4 w-4 text-blue-600" />
                </div>
                <div>
                  <p className="font-medium">数学竞赛三等奖</p>
                  <p className="text-sm text-muted-foreground">校内数学竞赛获奖</p>
                  <p className="text-xs text-muted-foreground mt-1">2024-02-15</p>
                </div>
              </div>
            </div>
            <Button asChild className="w-full">
              <Link href="/parent/children/awards">查看全部记录</Link>
            </Button>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <MessageSquare className="h-5 w-5" />
            老师评语
          </CardTitle>
          <CardDescription>老师的评价和建议</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="bg-muted p-3 rounded-lg">
              <p className="text-sm">小明在课堂上很积极发言，善于思考。建议可以多关注数学应用题的解题思路，提高解决问题的能力。</p>
              <div className="flex justify-between items-center mt-2">
                <p className="text-xs text-muted-foreground">数学 - 王老师</p>
                <p className="text-xs text-muted-foreground">2024-03-15</p>
              </div>
            </div>
            <div className="bg-muted p-3 rounded-lg">
              <p className="text-sm">作文有很大进步，描写更加细腻。继续加油！</p>
              <div className="flex justify-between items-center mt-2">
                <p className="text-xs text-muted-foreground">语文 - 李老师</p>
                <p className="text-xs text-muted-foreground">2024-03-14</p>
              </div>
            </div>
            <Button asChild className="w-full">
              <Link href="/parent/children/comments">查看全部评语</Link>
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
} 